<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #background{
            background-color: darkblue;
            height: 2000px;
        }
        #div1{
            background-color: bisque;
            width: 100px;
            height: 100px;
            position: fixed;
            right: 30px;
            bottom: 50px;
        }
        #div2{
            background-color: bisque;
            width: 100px;
            height: 100px;
            position: relative;
            top: 30px;
            left: 150px;
        }
        #div3{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 100px;
            left: 100px;
        }
        #div4{
            background-color: crimson;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

<div id="background">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
    <div id="div4">div4</div>
</div>

<!--
position:定位
取值：fixed，这是相对于窗口的定位，不会随着页面的滑动而滑动
    relative，这是相对于自己原来的位置就行定位。
    absolute,这是绝对定位，相对于父元素的位置，
        父元素必须是设置了position，否则一直寻找父元素，直到找到了position为止，最终都没有的话会以body为参照
-->


</body>
</html>